<!DOCTYPE html>
<html ng-app="app">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="css/reset.css">
	<style type="text/css">
		html {
			height: 100%;
			width: 100%;
			overflow-x: hidden;
		}

		body {
			text-align: left;
			width: 100%;
			overflow: hidden;
			background: #e9dfc7;
		}

		.m-read-content {
			font-size: 14px;
			color: #555;
			line-height: 31px;
			padding: 15px;
		}

		.m-read-content h4 {
			font-size: 20px;
			color: #736357;
			border-bottom: solid 1px #000000;
			letter-spacing: 2px;
			margin:0 0 1em 0;
		}

		.m-read-content p{
			text-indent: 2em;/* 段落缩进 */
			margin:0.5em 0;
			letter-spacing: 0px;
			line-height: 24px;
		}

		.u-tab{
			height:34px;
			margin:10px auto;
			line-height: 34px;
			border-radius:8px;
			border:1px solid #858382;
			font-size:12px;
			background:#000;
			opacity: 0.9;
		}
		.u-tab li{
			display: inline-block;
			width:49%;
			border-right:1px solid #858382;
			text-align: center;
			color:#FFF;
		}

		.u-tab li:nth-child(2){
			border-right:none;
		}

		.m-button-bar{
			width:70%;
			max-width:800px;
			padding:5px;
			margin:0 auto;
		}
		.top-nav{
			position: fixed;
			top:0px;
			height:50px;
			width:100%;
			z-index: 9999;
			background:#000;
		}
		.icon-back{
			position:absolute;
			top:14px;
			left:18px;
			height:23px;
			width:23px;
			background:url();
			background-size: contain;/* 自适应容器宽度和高度 */
		}
		.nav-title{
			position:absolute;
			top:16px;
			left:42px;
			color:#d5d5d6;
		}

		.bottom-nav{
			position:fixed;
			bottom:0;
			height:70px;
			width:100%;
			z-index:9999;
			background: #000;
		}
		.bottom-nav li{
			display: inline-block;
			width:32%;
			text-align:center;
			margin:0 auto;
			color:#FFF;
		}
		.icon-bottom-nav{
			height:18px;
			width:18px;
			margin:18px auto 5px;		
		}
		.icon-log{			
			background:url();
			background-size: contain;
		    background-repeat: no-repeat;
		}
		.icon-font{
			background:url();
			background-size: contain;			
			background-repeat: no-repeat;
		}
		
		.bottom-nav .focus .icon-font{
			background:url();
			background-size: contain;
			background-repeat: no-repeat;
		}
		.icon-day{
			background:url();
			background-size: contain;
		    background-repeat: no-repeat;
		}
		.icon-night{
			background:url();
			background-size: contain;
		    background-repeat: no-repeat;
		}
		.nav-panel{
			position:fixed;
			bottom:70px;
			height:135px;
			width:100%;
			z-index: 9999;
			background:rgba(0,0,0, 0.9);
			color:#FFF;
		}
		.child-mod{
			padding:5px 10px;
			margin:15px;
		}
		.child-mod span{
			display: inline-block;
			padding-right:20px;
			padding-left:10px;
		}
		.font-size-button{
			background:none;
			border:1px solid #8c8c8c;
			color:#FFF;
			border-radius:16px;
			padding:5px 40px;
		}

		.child-mod button:nth-child(3){
			margin-left:10px;
		}

		.bg-container{
			position: relative;
			width:30px;
			height:30px;
			border-radius:15px;
			
			display: inline-block;
			vertical-align:middle;
		}

		.bg-container-current{
			position: absolute;
			width:32px;
			height:32px;
			border-radius:16px;
			border:1px solid #ff7800;
			top:-2px;
			left:-2px;
			display: none;
		}
		.bg-orgin{
			background: #e9dfc7
		}
				
		.bg-white{
			background: #FFFFFF
		}
				
		.bg-green{
			background: #0bf759
		}
				
		.bg-black{
			background: #000000
		}
		
		.nav-panel .current .bg-container-current{
			display:block;			
		}
		.artical-action-mid{
			position:fixed;
			z-index: 10000;
			width:100%;
			height:40%;
			top:30%;
		}
		#day-switch-button .hide-switch-button{
			display: none;
		}
	</style>
</head>

<body>
	<div id="root" class="container">
		<div class="m-artical-action">
			<div class="artical-action-mid" id="action-mid"></div>
		</div>

		<div id="top-nav" class="top-nav" style="display:none">
			<div class="icon-back"></div>
			<div class="nav-title">返回书架</div>
		</div>
		
		<div id="bottom-nav" class="bottom-nav" style="display:none">
			<ul>
				<li id="log-button">
					<div class="icon-bottom-nav icon-log"></div>
					<div class="label">目录</div>
				</li>
				<li id="font-button">
					<div class="icon-bottom-nav icon-font"></div>
					<div class="label">字体</div>
				</li>
				<li id="day-switch-button">
					<div id="day-button" initColorStr="e9dfc7">
						<div class="icon-bottom-nav icon-day"></div>
						<div class="label">白天</div>
					</div>
					<div id="night-button" initColorStr="000000">
						<div class="icon-bottom-nav icon-night"></div>
						<div class="label">夜间</div>
					</div>
				</li>
				</ul>
		</div>
		
		<div class="nav-panel" id="font-container" style="display:none">
			<div class="child-mod">
				<span>字号</span>
				<button id="large-font" class="font-size-button">大</button>
				<button id="small-font" class="font-size-button">小</button>
			</div>
		<div class="child-mod">
			<span>背景</span>			
			<div class="bg-container bg-orgin" initColorStr="e9dfc7">
				<div class="bg-container-current"></div>
			</div>
			<div class="bg-container bg-white" initColorStr="FFFFFF">
				<div class="bg-container-current"></div>
			</div>
			<div class="bg-container bg-green" initColorStr="0bf759">
				<div class="bg-container-current"></div>
			</div>
			<div class="bg-container bg-black" initColorStr="000000">
				<div class="bg-container-current"></div>
			</div>
			
		</div>
				</div>
		<div id="fiction_chapter_title"></div>
		<div id="fiction_container" class="m-read-content">

			<h4>一、文献综述的概念</h4>
			<p>文献综述是针对某一研究领域或专题搜集大量文献资料的基础上，就国内外在该领域或专题的主要研究成果、最新进展、研究动态、前沿问题等进行综合分析而写成的，能比较全面地反映相关领域或专题历史背景、前人工作、争论焦点、研究现状和发展前景等内容的综述性文章，是高度浓缩的文献产品。“综”是要求对文献资料进行综合分析、归纳整理，使材料更精练明确、更有逻辑层次；“述”就是要求对综合整理后的文献进行比较专门的、全面的、深入的、系统的评述。</p>

			<h4>二、撰写文献综述的基本要求</h4>
			<p>文献综述主要用以介绍与毕业设计主题密切相关的详细资料、动态、进展、展望以及对以上方面的评述。除综述题目外，其内容一般包含前言、主题、总结、参考文献四个部分，撰写文献综述时可按这四部分拟写提纲，再根据提纲进行撰写工作。 前言部分，主要说明写作的目的，介绍有关的概念、定义以及综述的范围，扼要说明有关主题的现状或争论焦点，使读者对全文要叙述的问题有一个初步的轮廓。
				主题部分，是综述的主体，其写法多样，没有固定的格式。可按年代顺序综述，也可按不同的问题进行综述，还可按不同的观点进行比较综述，不管用那一种格式综述，都要将所搜集到的文献资料进行归纳、整理和分析比较，阐明有关主题的历史背景、现状、发展方向以及对这些问题的评述。主题部分应特别注意代表性强、具有科学性和创造性文献的引用和评述。
				总结部分，将全文主题进行扼要总结，提出自己的见解并对进一步的发展方向做出预测。 参考文献，它不仅表示对被引用文献作者的尊重及引用文献的依据，而且也为评审者审查提供查找线索。参考文献的编排应条目清楚，查找方便，内容准确无误。参考文献的书写格式与毕业设计（论文）相同。
			</p>
		</div>
		<div class="m-button-bar">
			<ul class="u-tab">
				<li id="prev_button">上一章</li>
				<li id="next_button">下一章</li>
			</ul>
		</div>
	</div>
	<script src="lib/zepto.min.js"></script>
	<script>
		window.jQuery = $;
	</script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/jquery.jsonp.js"></script>

	<script>
		(function(){
			'use strict';
			var Util = (function(){
				var prefix = 'html5_reader_';
				var StorageGetter = function(key){
					return localStorage.getItem(prefix+key);
				}
				var StorageSetter = function(key,val){
					return localStorage.setItem(prefix+key,val);
				}
				var BgColorSetter = function(colorStr){
					Dom.body.css('background_color','#'+colorStr);					
					Util.StorageSetter('background_color',colorStr);
				}
				var getBSONP = function(url,callback) {
					return $.jsonp({
						url:url,
						cache:true,
						callback:'duokan_fiction_chapter',
						success:function(result){
							var data = $.base64.decode(result);
							var json = decodeURIComponent(escape(data));
							callback(json);
						}
					})
				}
				return {
					StorageGetter:StorageGetter,
					StorageSetter:StorageSetter,
					BgColorSetter:BgColorSetter,
					getBSONP:getBSONP
				}
			})();

			//将多次使用的元素提前引用，提高速度
			var Dom = {
				top_nav:$('#top-nav'),
				bottom_nav:$('#bottom-nav'),
				font_container:$('#font-container'),
				font_button:$('#font-button'),
				fiction_container:$('#fiction_container'),
				bg_container:$('.bg-container'),
				body:$('body'),
				day_button:$('#day-button'),
				night_button:$('#night-button')
			}
			//初始字体设置
			var initFontSize = Util.StorageGetter('font_size');
			initFontSize=parseInt(initFontSize);
			if(!initFontSize){
				initFontSize=14;
			}
			Dom.fiction_container.css('font-size',initFontSize);
			//初始背景设置
			var initBgColor = Util.StorageGetter('background_color');			
			if(!initBgColor){
				initBgColor='e9dfc7';
			}
			Dom.body.css('background_color','#'+initBgColor);			
			//初始背景的相应变化（白天黑夜、颜色选中）
			$('.nav-panel [initColorStr="'+initBgColor+'"]').addClass('current');
			if(initBgColor==$('.bg-black').attr('initColorStr')){
				Dom.day_button.addClass("hide-switch-button");
				Dom.night_button.removeClass("hide-switch-button");
			}else{				
				Dom.day_button.removeClass("hide-switch-button");
				Dom.night_button.addClass("hide-switch-button");
			}

			
			var Win = $(window);
			var Doc = $(document);
			var readerModel,readerUI;
			function main(){
				//todo 整个项目的入口函数
				readerModel = ReaderMode();
				readerUI = ReaderBaseFrame(Dom.fiction_container)
				// readerModel.init(function(data){
				// 	readerUI(data);
				// });
				readerModel.init().then(function(data){
					readerUI(data);
				});
				EventHandler();
			}

			function ReaderMode(){
				//数据层,跟服务器端的数据交互，例如ajax，jsonp
				//todo 实现阅读器相关的数据交互方法
				var Chapter_id = Util.StorageGetter('Chapter_id');				
				var ChapterTotal;
				var init = function(){
					return new Promise(function(resolve,reject){
						getFictionInfoPromise().then(function(){
							return getCurChapterContentPromise();						
						}).then(function(data){							
							resolve(data);
						});
					});
					
					
				}
				// var init = function(UIcallback){
				// 	getFictionInfo(function(){
				// 		getCurChapterContent(Chapter_id,function(data){
				// 			UIcallback&&UIcallback(data);
				// 		});
				// 	})
				// }
				var getFictionInfo = function(callback){
					$.get('data/chapter.json',function(data){
						//TODO 获得章节信息之后的回调
						Chapter_id = Chapter_id?Chapter_id:data.chapters[1].chapter_id;
						ChapterTotal = data.chapters.length;
						callback && callback();
					},'json');
				}
				var getFictionInfoPromise = function(){
					return new Promise(function(resolve,reject){
						$.get('data/chapter.json',function(data){
							//TODO 获得章节信息之后的回调
							Chapter_id = Chapter_id?Chapter_id:data.chapters[1].chapter_id;
							ChapterTotal = data.chapters.length;							
							resolve();
						},'json');
					});
				}
				var getCurChapterContent = function(chapter_id,callback){
					$.get('data/data' + chapter_id + '.json',function(data){
						if(data.result == 0){
							Util.StorageSetter('Chapter_id',chapter_id);
							var url = data.jsonp;
							Util.getBSONP(url,function(data){
								callback && callback(data);
							});
						}
					},'json');
				}
				var getCurChapterContentPromise = function(){
					return new Promise(function(resolve,reject){
						$.get('data/data' + Chapter_id + '.json',function(data){
							if(data.result == 0){
								Util.StorageSetter('Chapter_id',Chapter_id);
								var url = data.jsonp;
								Util.getBSONP(url,function(data){									
									resolve(data);
								});
							}
						},'json');
					});					
				}
				var preChapter = function(UIcallback){
					Chapter_id = parseInt(Chapter_id,10);
					if (Chapter_id==1) {
						return;
					}
					Chapter_id -= 1;
					getCurChapterContent(Chapter_id,UIcallback);
				}
				var nextChapter = function(UIcallback){
					Chapter_id = parseInt(Chapter_id,10);
					if (Chapter_id==ChapterTotal) {
						return;
					}
					Chapter_id += 1;
					getCurChapterContent(Chapter_id,UIcallback);
				}
				return {
					init:init,
					preChapter:preChapter,
					nextChapter:nextChapter
				}
			}

			function ReaderBaseFrame(container){
				//todo 渲染基本的UI结构
				function parseChapterData(jsonData){
					var jsonObj = JSON.parse(jsonData);
					var html = '<h4>' + jsonObj.t + '</h4>';
					for(var i = 0;i<jsonObj.p.length;i++){
						html += '<p>' + jsonObj.p[i] + '</p>'
					}
					return html;
				}
				return function(data){
					container.html(parseChapterData(data));
				}
			}
			
			function EventHandler(){
				//todo 交互的事件绑定
				Dom.bg_container.click(function(){
					var selectBgColor=this.getAttribute('initcolorstr');					
					Dom.bg_container.removeClass('current');
					$(this).addClass('current');
					Util.BgColorSetter(selectBgColor);
					if(selectBgColor==$('.bg-black').attr('initColorStr')){
						Dom.day_button.addClass("hide-switch-button");
						Dom.night_button.removeClass("hide-switch-button");
					}else{				
						Dom.day_button.removeClass("hide-switch-button");
						Dom.night_button.addClass("hide-switch-button");
					}
				});

				$('#day-switch-button').click(function(){
					//todo 触发背景切换事件
					//判断并切换按钮状态，设置背景色+ls，设置背景选中（黑、白）
					//Util.BgColorSetter('666');
					if(Dom.day_button.hasClass("hide-switch-button")){
						Dom.day_button.removeClass("hide-switch-button");
						Dom.night_button.addClass("hide-switch-button");
						var selectBgColor = Dom.day_button.attr("initcolorstr");
						Util.BgColorSetter(selectBgColor);

						Dom.bg_container.removeClass('current');
						$('.nav-panel [initColorStr="'+selectBgColor+'"]').addClass('current');
					}else{
						Dom.day_button.addClass("hide-switch-button");
						Dom.night_button.removeClass("hide-switch-button");
						var selectBgColor = Dom.night_button.attr("initcolorstr");
						Util.BgColorSetter(selectBgColor);

						Dom.bg_container.removeClass('current');
						$('.nav-panel [initColorStr="'+selectBgColor+'"]').addClass('current');
					}
				});

				$('#action-mid').click(function(){
					if(Dom.top_nav.css('display')=='none'){
						Dom.top_nav.show();
						Dom.bottom_nav.show();
					}else{
						Dom.top_nav.hide();
						Dom.bottom_nav.hide();
						Dom.font_container.hide();
						Dom.font_button.removeClass('focus');
					}
				});
				
				Dom.font_button.click(function(){
					
					if(Dom.font_container.css('display')=='none'){
						Dom.font_container.show();
						Dom.font_button.addClass('focus');
					}else{
						Dom.font_container.hide();
						Dom.font_button.removeClass('focus');
					}
				});

				
				$('#large-font').click(function(){
					if(initFontSize>20){
						return;
					}
					initFontSize+=1;
					Dom.fiction_container.css('font-size',initFontSize);
					Util.StorageSetter('font_size',initFontSize);
				});
				$('#small-font').click(function(){
					if(initFontSize<12){
						return;
					}
					initFontSize-=1;
					Dom.fiction_container.css('font-size',initFontSize);
					Util.StorageSetter('font_size',initFontSize);
				});
				
				Win.scroll(function(){
					Dom.top_nav.hide();
					Dom.bottom_nav.hide();
					Dom.font_container.hide();
					Dom.font_button.removeClass('focus');
				});
				
				$('#prev_button').click(function(){
					readerModel.preChapter(function(data){
						readerUI(data);
					});
				});
				$('#next_button').click(function(){
					readerModel.nextChapter(function(data){
						readerUI(data);
					});
				})
			}

			main();





		})();






	</script>
</body>

</html>